<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <style type="text/css">
        #map {
            width: 900px;
            height: 282;
            border: 1px solid black;
        }
        #zoomLevel {
           bottom: 10px;
           left: 0px;
        }
        #gene {
            background-color: red;
            color:white;
        }
        #mrna {
            background-color: blue;
            color:white;
        }
        #cds {
            background-color: green;
            color:white;
        }
    </style>
    <script src="http://openlayers.org/api/2.7/OpenLayers.js"></script>
    <script src="javascript/Genomic.js"></script>
    <script src="javascript/opengenes.js"></script>

    <script type="text/javascript">
    /* ruler, chromosome, cds, rna, gene, protein,
       domain, other, cns, nt, gc, background, */

        <!--
        if(! window.console){ console={}; console.log = console.debug = function(){}}

        var map, layers;
        var chr = 7;
        var bp;
        var size= 285;
        var server = 'tiler.pl?'
        var ds = 588;
        var org = "rice";
        function init(){
            map = new OpenLayers.GenomeBrowser( $('map') , 
            {   
                 maxExtent: new OpenLayers.Bounds(-50000,-10000,1000000000,10000),
                 units     :'bp',
                 tileSize: new OpenLayers.Size(512, 285),
                 //resolutions:[1024,512,256,128,64,32,16,8,4,2,1],
                 resolutions:[128,64,32,16,8],
                 controls: [new OpenLayers.Control.MouseDefaults()]
            });
            layers = [
            new OpenLayers.Layer.Genomic( "Ruler" , server
                 ,{'chr':chr,layers:"background,ruler",'version':6,organism:org}
                 ,{isBaseLayer:true} 
             ),
            new OpenLayers.Layer.Genomic( "<span id='gene'>Genes</span>" , server
                 ,{'chr':chr,layers:"gene,CDS,mRNA",'version':6,organism:org}
                 ,{isBaseLayer:false}
             )
            ]
            map.addControl(new OpenLayers.Control.LayerSwitcher())
            /*
            gc.setVisibility(false);
            map.addLayer(gc)
            */
            map.addLayers(layers);
            /*                                          zoomLevel */
            map.setCenter(new OpenLayers.BasePair(494000), 1);
            bp = new OpenLayers.Control.GMousePosition() 
            map.addControl(bp );
            map.addControl(new OpenLayers.Control.PanZoomBar());


            map.events.register('zoomend',map,updateZoom);
            map.events.triggerEvent('zoomend');

            map.events.register('mousedown',map,mapMouseDown);
            map.events.register('mouseup',map,mapMouseUp);


        }

        function mapMouseDown(e){
            map.lastMouseX = e.xy.x;
            map.lastMouseY = e.xy.y;
        }
        function mapMouseUp(e){
            var tx = e.xy.x;
            var ty = e.xy.y;
            var tot = Math.abs(map.lastMouseX - tx) 
                + Math.abs(map.lastMouseY - ty);
            if(4 > tot){
                // dont need to figure out basepairs from pixels
                // just use the ones in the window already.
                query(parseInt(bp.element.innerHTML));
            }
        }

        function updateZoom(){
            $('resolution').innerHTML = map.getResolution() + 'bp/pixel';

        }
        function query(x){

          // var url = 'http://toxic.berkeley.edu/bpederse/cogex/FeatAnno.pl?chr='
           var url = '/CoGe/FeatAnno.pl?chr='
           + chr + '&version=5&layers=gene&organism=' + org + '&loc='
           + x + '&' + 'ds=' + 588
           jfetch(url,'query');
         }

        // -->
    </script>
  </head>
  <body onload="init()">
    <div id="text">
    This is a small hack of <a
    href="http://openlayers.org">OpenLayers</a> GIS mapping program
    that allows you to navigate genomes. Below is rice chromosome 7
    with a single track added. As with openlayers, one can add as many
    tracks as desired. 
    Images are rendered from a perl program by E. Lyons and J. Kane.
    souce (for js stuff) available via SVN: 
    <pre>svn checkout https://genome-browser.googlecode.com/svn/trunk/ genome-browser</pre>
    or <a href="http://code.google.com/p/genome-browser/downloads/list">
    tar ball</a>
    </div>
    <div id="map">
    </div>
    <div id='resolution'></div>
    <div id='query'></div>
  </body>
</html>


